<template>
  <view>
    <teleport to="body">
      <template v-if="displayRecharge">
        <view class="popup-overlay">
          <view class="popup-content">
            <text>{{ title }}</text>
            <input
              type="number"
              :placeholder="tips"
              class="input"
              placeholder-style="height: 22rpx;
font-size: 20rpx;
font-family: Arial, Arial;
font-weight: 400;
color: rgba(255,255,255,0.5);
line-height: 23rpx;"
            />
            <view class="btn">
              <view class="Cancel" @click="displayRecharge = false"
                >Cancel</view
              >
              <view class="Ok" @click="Ok">Ok</view>
            </view>
          </view>
        </view>
      </template>
    </teleport>
  </view>
</template>

<script setup>
// 组件已弃用，直接写在页面了
import { ref } from 'vue';
const displayRecharge = ref(true);
const title = ref('recharge');
const tips = ref('Please enter the amount that needs to be recharged');

//点击确定
const Ok = () => {
  console.log('充值操作----->');
  displayRecharge.value = false;
};
</script>

<style scoped lang="scss">
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  width: 688rpx;
  height: 380rpx;
  background-image: url('/static/recharge/Rectangle 36.png');
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  text {
    width: 146rpx;
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #00d084;
    line-height: 38rpx;
    display: block;
    margin: 30rpx auto;
  }
  .input {
    width: 628rpx;
    height: 94rpx;
    background-image: url('/static/recharge/Rectangle 75.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: #fff;
  }
  .btn {
    height: 36rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #ffffff;
    line-height: 38rpx;
    display: flex;
    justify-content: space-evenly;
    margin-top: 50rpx;

    .Cancel {
      width: 284rpx;
      height: 74rpx;
      line-height: 74rpx;
      background-image: url('/static/recharge/Rectangle 76.png');
      background-size: cover;
      background-repeat: no-repeat;
    }
    .Ok {
      width: 284rpx;
      height: 74rpx;
      line-height: 74rpx;
      background-image: url('/static/recharge/Rectangle 62.png');
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
</style>
